<template>
  <div class="wh-book">
    <div class="wh-book-inner">
      <div class="book-wrapper">
        <div class="book" :class="{ top: currentPage === 1, turn: currentPage >= 1 }">
          <div class="left"></div>
          <div class="right">
            <img src="../../assets/images/home/pdf-en.jpg" alt="en" />
          </div>
        </div>
        <div class="book" :class="{ top: currentPage === 2, turn: currentPage >= 2 }">
          <div class="left">
            <img src="../../assets/images/home/pdf-zh.jpg" alt="zh" />
          </div>
          <div class="right">
            <img src="../../assets/images/home/ppt-en.jpg" alt="en" />
          </div>
        </div>
        <div class="book" :class="{ top: currentPage === 3, turn: currentPage >= 3 }">
          <div class="left">
            <img src="../../assets/images/home/ppt-zh.jpg" alt="zh" />
          </div>
          <div class="right">
            <img src="../../assets/images/home/word-en.jpg" alt="en" />
          </div>
        </div>
        <div class="book" :class="{ top: currentPage === 4, turn: currentPage >= 4 }">
          <div class="left">
            <img src="../../assets/images/home/word-zh.jpg" alt="zh" />
          </div>
          <div class="right">
            <img src="../../assets/images/home/jpg-en.jpg" alt="en" />
          </div>
        </div>
        <div class="book" :class="{ top: currentPage === 5, turn: currentPage >= 5 }">
          <div class="left">
            <img src="../../assets/images/home/jpg-zh.jpg" alt="zh" />
          </div>
          <div class="right">
            <img src="../../assets/images/home/excel-en.jpg" alt="en" />
          </div>
        </div>
        <div class="book" :class="{ top: currentPage === 6, turn: currentPage >= 6 }">
          <div class="left">
            <img src="../../assets/images/home/excel-zh.jpg" alt="zh" />
          </div>
          <div class="right"></div>
        </div>
      </div>
      <p>云译通翻译还原度展示</p>
      <ul class="page-dots">
        <li
          v-for="item in pageList"
          :key="item.id"
          :class="{ active: item.id === currentPage }"
          @mouseenter="handleMouseEnter(item.id)"
          @mouseleave="play"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="book-bg">
      <img src="../../assets/images/home/book_bg.png" alt="book" />
      <img src="../../assets/images/home/book_bg2.png" alt="book" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'

const currentPage = ref<number>(1)
const bookTimer = ref<ReturnType<typeof setTimeout>>()

const pageList = reactive([
  { id: 1, name: 'PDF' },
  { id: 2, name: 'PPT' },
  { id: 3, name: 'Word' },
  { id: 4, name: 'JPG' },
  { id: 5, name: 'Excel' }
])

const play = () => {
  bookTimer.value && clearTimeout(bookTimer.value)
  bookTimer.value = setTimeout(() => {
    currentPage.value++
    if (currentPage.value > pageList.length) currentPage.value = 1
    play()
  }, 3000)
}

const handleMouseEnter = (id: number) => {
  bookTimer.value && clearTimeout(bookTimer.value)
  currentPage.value = id
}

onMounted(() => {
  play()
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

@keyframes book-shadow {
  to {
    opacity: 0;
  }
}

.wh-book {
  position: relative;
  z-index: 10;
  min-width: 1200px;
  width: 1150px;
  margin: 60px auto 0;
  box-sizing: border-box;
  text-align: center;

  .book-bg {
    z-index: 10;
    width: 1900px;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);

    img {
      object-fit: contain;
      position: absolute;
      left: 0;
      top: 0;

      &:nth-of-type(1) {
        animation: book-shadow linear 2s infinite alternate;
      }

      &:nth-of-type(2) {
        animation: book-shadow linear 2s 2s infinite alternate;
      }
    }
  }

  .wh-book-inner {
    border: 4px solid #fff;
    border-radius: 76px;
    padding: 18px 86px 43px;
    position: relative;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.6);

    > .book-wrapper {
      width: 100%;
      height: 567px;
      position: relative;
      z-index: 100;
      perspective: 2000px;
      transform-style: preserve-3d;

      > .book {
        width: 50%;
        height: 567px;
        position: absolute;
        right: 0;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        transform-style: preserve-3d;
        perspective: 2000px;
        z-index: 2;
        transform-origin: -2px center;
        transition: all 1s;

        &.top {
          z-index: 10;
        }

        &.top + .book {
          z-index: 5;
        }

        &.turn {
          transform: rotateY(-180deg);
        }

        > .left,
        > .right {
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          backface-visibility: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 100px;
          border-radius: 42px;
          overflow: hidden;

          > img {
            width: 100%;
            height: 100%;
            object-fit: fill;
          }
        }

        .left {
          margin-right: 2px;
        }

        .right {
          margin-right: 2px;
          transform: rotateY(180deg);
        }
      }
    }

    > p {
      padding-top: 35px;
      padding-bottom: 34px;
      font-size: 22px;
      color: #324153;
      position: relative;
      z-index: 100;
    }

    > .page-dots {
      position: relative;
      z-index: 100;
      margin: 0 auto;
      display: inline-flex;

      > li {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 123px;
        height: 44px;
        border-radius: 22px;
        transition: all 1s;
        font-size: 16px;

        &.active {
          color: #fff;
          background-color: #4ed8c0;
        }
      }
    }
  }
}
</style>
